<script setup lang="ts">
import { ref, computed, reactive } from "vue";
import { userInformation } from "../userInformation";
import navBar from "../../../../src/components/layout/navBar.vue"

const props = defineProps<{}>();
const emit = defineEmits([]);
const initData = reactive({} as any);
const { exit, back } = userInformation(props, initData, emit);

const personage = ref({
  name: "",
  gender: "",
  id: "",
  phone: "",
  email: "",
});
const show = ref(false);
const showNotify = () => {
  show.value = true;
  setTimeout(() => {
    show.value = false;
    exit();
  }, 3000);
};
const onFailed = (errorInfo: any) => {
  console.log("failed", errorInfo);
  showNotify();
};

const onSubmit = (values: any) => {
  console.log("submit", values);
  showNotify();
};

//  const validatorId = (val: string) =>/^(\d{6})(18|19|20)?(\d{2})([01]\d)([0123]\d)(\d{3})(\d|X|x)?$/.test(val);
//  const validatorPhone = (val: string) =>/ ^1[3|4|5|8][0-9]\d{8}$/.test(val);
//  const validatorName = (val: string) =>/ ^[\u0391-\uFFE5]+$/.test(val);

</script>

<template>
  <div>
              <navBar left="Y" right="N" title="个人信息"></navBar>

  </div>
  <van-form @submit="onSubmit">
    <van-cell-group inset>
        
      <van-field
        v-model="personage.name"
        required
        name="姓名："
        label="姓名："
        placeholder="姓名"
        :rules="[{ required: true, message: '请输入正确姓名' }]"
      />

      <van-field required name="gender" label="性别"  :rules="[{ required: true, message: '请选择性别' }]">
        <template  #input>
        
          <van-radio-group v-model="personage.gender"  direction="horizontal" >
            <van-radio name="1">男</van-radio>
            <van-radio name="2">女</van-radio>
          </van-radio-group>
        </template>
      </van-field>
        <van-field
        v-model="personage.id"
        required
        name="身份证号"
        label="身份证号"
        placeholder="身份证号"
        :rules="[{  required: true, message: '请输入正确身份证号' }]"
      />
      <van-field
        v-model="personage.phone"
        required
        name="手机号："
        label="手机号："
        placeholder="手机号"
        :rules="[{  required: true, message: '请输入正确手机号' }]"
      />
      <van-field
        v-model="personage.email"
        required
        name="邮箱："
        label="邮箱："
        placeholder="邮箱："
        :rules="[{ required: true, message: '请输入正确邮箱' }]"
      />
    </van-cell-group>
    <div style="margin: 16px">
      <van-button round block type="primary" native-type="submit"
        >提交</van-button
      >
    </div>
  </van-form>
</template>
<style scoped>
.navbar {
  background: url(../../../public/assets/projectPhotos/background.png);
}
:deep(.van-nav-bar__title) {
  color: white;
}
:deep(.van-nav-bar__text) {
  color: white;
}
:deep(.van-icon-arrow-left:before) {
  color: white;
}
:deep(.van-popup--top) {
  height: 6%;
}
</style>